<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2固定定位技巧2</title>
    <style>
        .mask {
            background-color: rgba(0,0,0,0.3);/*带透明度的颜色*/
            position: fixed;/*使用固定定位,紧贴参照物html的4个边,就和窗口一样大*/
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }
        .mask:hover {
            /*transform: scale(0);*/ /*缩小到看不见*/
            display: none;/*让元素在文档流消失*/
        }
    </style>
</head>
<body>
<!--遮罩层-->
<div class="mask"></div>

<!--网页内容--><!--div>lorem*40-->
<div>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut doloribus maiores officia, possimus quidem
        reiciendis tenetur. Exercitationem ipsam itaque laboriosam nisi, non quia! Consequuntur dolor labore quae,
        reprehenderit saepe veritatis!
    </div>
    <div>Dolores, magni, perferendis. Adipisci aliquam dicta, ex odit possimus unde. Incidunt itaque nisi quis quo? Ad
        beatae consequuntur dignissimos dolor ex itaque laudantium necessitatibus neque non, porro ratione tempora
        voluptas?
    </div>
    <div>Accusamus asperiores aspernatur aut beatae consequuntur dolorum earum, eius eligendi error excepturi illo ipsam
        iure laborum magni, minima modi mollitia nisi obcaecati quas quibusdam, quod quos sed sit voluptates
        voluptatibus.
    </div>
    <div>A adipisci aliquid aut commodi corporis est excepturi harum in iure iusto laudantium maiores minus molestias
        nihil nulla obcaecati optio placeat, porro provident quaerat quasi quia quisquam quos sunt vero?
    </div>
    <div>Et harum impedit in maxime neque sint totam ullam? A accusantium aliquam aperiam at cumque eaque, eius ex illum
        maxime mollitia natus officia optio possimus quae quibusdam reprehenderit tempora temporibus!
    </div>
    <div>Consectetur eveniet ex modi nostrum quaerat! Aliquid consectetur consequatur error est et excepturi facere,
        illo in libero molestiae nobis obcaecati quae quo quos sequi sint sit tempore ullam unde velit.
    </div>
    <div>Blanditiis commodi consequatur dicta doloremque ea eaque facere minus molestias optio soluta? Consequuntur
        expedita fuga id nemo numquam possimus quae quibusdam quo sed veniam? Eos eum quasi tempore veniam vitae?
    </div>
    <div>Accusamus ad alias assumenda consectetur cumque dolor dolorem dolores ea eius ex exercitationem facere iusto
        laudantium nihil nisi nostrum, numquam optio porro quis quisquam reprehenderit rerum, similique, sunt velit
        voluptas.
    </div>
    <div>Blanditiis, culpa eaque! Blanditiis dignissimos minima nobis possimus voluptate voluptates! Animi aperiam
        commodi exercitationem odio repellendus repudiandae saepe! Blanditiis debitis deleniti excepturi libero
        molestiae quasi rem repudiandae sit vitae? Voluptatem?
    </div>
    <div>Asperiores cumque cupiditate deserunt dicta dolore ea et expedita minus molestiae, nihil nobis non numquam odio
        quibusdam quisquam, repellat, tenetur! Facere laboriosam laudantium nihil obcaecati provident recusandae
        repellat sunt voluptatem?
    </div>
    <div>Ab aliquam commodi, deserunt dolorem error eum impedit laudantium, nemo nihil, nobis non odio rem sapiente
        sequi tempore ut vero. Blanditiis hic illo minima placeat porro quasi quibusdam quo recusandae.
    </div>
    <div>A accusamus ad, alias atque cumque debitis dignissimos dolorum ducimus eaque eum excepturi fugiat ipsa magni
        nobis odit perspiciatis porro quasi quia reiciendis rem similique sint sit suscipit tempore, temporibus.
    </div>
    <div>Ab cupiditate dolores, iste laboriosam perspiciatis praesentium quidem quo rerum sunt veritatis. Accusamus
        consequuntur dignissimos dolore error est facere fugiat iste pariatur quaerat. Eligendi nesciunt nihil omnis
        recusandae velit veniam?
    </div>
    <div>Beatae id iste laboriosam maxime! Accusamus ad amet autem cupiditate dignissimos earum eligendi eum fuga fugiat
        illum ipsa magnam magni modi nulla ratione rem sit, tenetur veniam. Aliquid, exercitationem, laudantium!
    </div>
    <div>Ad aspernatur at consequuntur culpa deleniti dolor, dolorem doloremque eius eum exercitationem facilis maxime
        nemo neque nihil nisi nobis nostrum porro quae qui quia quo vero vitae voluptas voluptate voluptatum.
    </div>
    <div>Aliquam architecto autem commodi consequatur consequuntur, dicta doloremque ducimus earum ex fugiat fugit id
        illo ipsa non nulla odit officiis omnis perspiciatis quaerat qui quibusdam quod sint tempore tenetur velit?
    </div>
    <div>Architecto deleniti eveniet illo nulla, quas repellat voluptate. Earum error libero maxime quasi ullam!
        Consequatur cumque cupiditate eius eligendi eos magni nam nihil obcaecati perspiciatis quisquam, quo ratione
        sapiente totam?
    </div>
    <div>Accusamus aliquid assumenda atque autem blanditiis consequuntur delectus distinctio dolores ea earum error, est
        illo incidunt iste itaque modi molestiae molestias nihil nobis nostrum pariatur possimus quod veritatis vitae
        voluptas.
    </div>
    <div>A aliquam amet aut commodi corporis distinctio dolore, eligendi harum incidunt ipsa ipsum iure labore nobis
        numquam quas quos, rem sed sunt vero voluptatum. Adipisci cupiditate inventore magni nobis recusandae?
    </div>
    <div>Accusamus animi architecto aspernatur assumenda deserunt dolorem eligendi eos facere fugiat illo illum in
        incidunt itaque laborum mollitia nisi non optio similique sit, suscipit ut vel velit veritatis! Molestiae, rem!
    </div>
    <div>Aliquid, cupiditate itaque. Atque harum hic omnis, qui sunt totam. Aperiam dolorum minima nihil quasi quibusdam
        ratione tenetur, velit. Aut consequatur corporis dolor eligendi ipsam nemo, similique voluptatum. Aliquid, ut.
    </div>
    <div>Accusantium aliquid animi ducimus expedita ipsam quos recusandae sint voluptatem! Amet eos ipsam perspiciatis
        quam. Ab ad delectus distinctio ea in nihil nisi numquam, placeat quam quia quod sapiente totam!
    </div>
    <div>Ducimus illo iure sint temporibus. Ad animi at autem, commodi consequatur deserunt distinctio doloremque libero
        maiores officiis perferendis porro possimus quaerat quibusdam ratione repellendus tenetur ut veritatis.
        Mollitia, quas, sapiente?
    </div>
    <div>Ad at dolor dolore dolorem ducimus error explicabo fugiat id iusto labore laboriosam magni maiores molestiae
        mollitia nesciunt obcaecati perspiciatis porro possimus quasi qui quis recusandae, reprehenderit rerum vitae
        voluptates.
    </div>
    <div>Commodi consectetur deleniti, deserunt doloremque dolores doloribus eligendi expedita facilis illum incidunt
        inventore iste nemo, odio provident quidem unde voluptatibus. Alias aperiam beatae distinctio eaque id, magni
        odio porro ratione!
    </div>
    <div>Aliquid architecto aspernatur assumenda autem beatae, cum deleniti dolore ea eaque esse ex excepturi inventore
        iure laudantium modi, nesciunt numquam obcaecati quasi quidem quis quod recusandae rerum unde, velit voluptate.
    </div>
    <div>Ab accusamus commodi consequatur culpa deleniti dicta dolore eos expedita explicabo facilis id in ipsa iste,
        itaque magni minima molestiae molestias nam nostrum officiis praesentium saepe sit, soluta velit vero?
    </div>
    <div>Et fugiat placeat possimus quis tempore veritatis voluptatem! Accusantium aut, ex explicabo illo illum iste
        iure necessitatibus odio possimus provident quo quod recusandae rem, reprehenderit ut voluptas voluptate? Animi,
        deserunt.
    </div>
    <div>Aliquid architecto aut consequatur doloremque, earum eveniet exercitationem facilis illo ipsam magnam officia
        provident quia rerum suscipit voluptatibus. Accusantium autem deserunt ipsam necessitatibus non ratione saepe
        similique temporibus vitae voluptatibus.
    </div>
    <div>Animi deleniti dolore earum facere id ipsam iste magni molestiae, nam nemo neque obcaecati omnis pariatur
        placeat provident quidem quis ratione repellat reprehenderit repudiandae soluta ut, vel vero? Tenetur, ullam.
    </div>
    <div>Aliquam atque autem culpa deserunt ea eius est exercitationem expedita hic in incidunt iste itaque, modi
        officia quam quibusdam sint sit temporibus! Aliquid, dicta dignissimos ea eveniet in iusto sit.
    </div>
    <div>Adipisci assumenda beatae blanditiis delectus dolorem eius eos, eum ipsa minus modi natus numquam obcaecati
        odit provident quae quas quia ratione rem sed totam velit vero vitae. Aliquam, quae, voluptatum.
    </div>
    <div>Accusantium alias aliquid beatae cumque doloribus, est, expedita facilis itaque modi nisi non placeat,
        provident qui quidem saepe sint sunt suscipit unde. Alias officia perferendis velit! Adipisci id necessitatibus
        neque!
    </div>
    <div>Accusantium consequatur illo minima molestias, qui quo voluptas voluptate. Accusantium ad autem blanditiis
        deleniti et exercitationem in, laborum, natus numquam quae qui ratione repellat reprehenderit sapiente tempore?
        Amet, libero, optio!
    </div>
    <div>Officiis, ratione, tempora! A aperiam cumque esse nobis officia pariatur, quidem voluptas. Ad animi asperiores
        atque blanditiis culpa doloribus fugiat id impedit laborum, nihil nulla perferendis porro quae sit veritatis.
    </div>
    <div>Amet consequatur debitis delectus dicta, enim fugit harum incidunt iusto magnam nam numquam quod ratione rem
        repellat saepe sapiente sed tenetur! Amet aspernatur laborum molestiae quas sapiente suscipit, velit voluptate?
    </div>
    <div>Accusantium, aperiam blanditiis consequatur consequuntur culpa cupiditate deserunt distinctio dolor doloribus,
        ea eaque est fugit minima minus molestias neque nulla numquam odio, quisquam quos ratione saepe vero voluptatem?
        Impedit, laboriosam.
    </div>
    <div>Ipsa optio perferendis perspiciatis quos rerum, sit tempora ullam. Earum in itaque iusto, laboriosam libero
        natus quisquam repudiandae suscipit! Animi assumenda labore obcaecati quod! Aliquid consectetur eligendi magni
        modi quasi?
    </div>
    <div>Dolore excepturi inventore iure laboriosam repellat similique vero, voluptate. Facilis molestias possimus quia
        quidem ut. A ab alias aliquam corporis dicta doloremque illum, iste maiores necessitatibus nostrum, perspiciatis
        provident quae?
    </div>
    <div>Ab adipisci asperiores distinctio exercitationem id ipsam labore laboriosam modi, nulla officia omnis porro
        quaerat quia repellendus suscipit tempora temporibus velit. Dolor dolores doloribus, harum nihil reprehenderit
        rerum voluptate voluptatibus.
    </div>
</div>
</body>
</html>